<?php if (!defined('THINK_PATH')) exit();?><!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="http://api.chinaola.net/ola/Application/Test/Public/css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="http://api.chinaola.net/ola/Application/Test/Public/css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="http://api.chinaola.net/ola/Application/Test/Public/css/base.css"/>
    <style type="text/css">
        body{
            background: #FFFFFF;}
        #beforenext,#question-area,.bg{
            background: #FFFFFF;
        }
        .bg{
            padding: 40px 0 10px 0;
        }
        .mui-content{
            background: #f5f6fa;
        }
        #beforenext {text-align: center;height: 49px;line-height: 49px;margin-top:10px;}
        #beforenext a {font-size: 18px;color: black;}
        #beforenext span {font-size: 40px;color: black;}
        #question-area{width: 95%;margin: 0 auto;border: 1px solid #aaaaaa;
            box-shadow:-3px 0 3px #D3D3D3, /*左边阴影*/  3px 0 3px #D3D3D3, /*右边阴影*/
            0 3px 3px #D3D3D3, /*顶部阴影*/  0 3px 3px #D3D3D3; /*底边阴影*/  }
        #question {margin-top: 2px; height: 60px;}
        #question p {font-size: 20px;color:#000000;padding: 25px 0 ;width: 300px;margin: 0 auto;text-indent:10px;}
        #choose {margin: 20px;}
        .score{margin-bottom: 12px;}
        #choose div p {text-align: center;font-size: 18px;color: #000000;line-height:50px;}
        #choose div p:active{color: white;}
        .choosebg {background: #f5f6fa;width: 100%;height: 49px;
            line-height: 3;color: #fff}
        #progressbar{width:100%; border:1px #F3F3F3 solid; height:25px; position: relative;
            background: #f5f6fa;}
        #bar{position:absolute;background-color: #ff8fc0;width: 0;height: 100%;}
        .choosebg_active:active{background: #ff8fc0;color:#000;}
        .more_text{
            margin:10px;
        }
        .bottom{height: 70px; background-color: #D3D3D3;position:fixed;bottom:0;left:0;width:100%;}
        .bottom img{float: left; width: 50px; height: 50px;margin: 10px;}
        .bottom p{float: left; color: #FFFFFF;line-height: 70px;font-size: 18px;}
        .bottom button{float: right;margin: 20px 10px 0 0;background-color: #6ccdff;}
        .bottom button a{color: #FFFFFF;}

        /* 弹窗 */
        #hank-popup {
            position: fixed;
            z-index: 10000;
            top: 50%;
            left: 50%;
            overflow: hidden;
            width: 270px;
            -webkit-transition-property: -webkit-transform,opacity;
            transition-property: transform,opacity;
            -webkit-transform: translate3d(-50%,-50%,0) scale(1.185);
            transform: translate3d(-50%,-50%,0) scale(1.185);
            text-align: center;
            opacity: 0;
            color: #000;
            border-radius: 13px;
            display: none;
        }
        #hank-popup.hank-popup-in {
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;
            -webkit-transform: translate3d(-50%,-50%,0) scale(1);
            transform: translate3d(-50%,-50%,0) scale(1);
            opacity: 1;
        }
        .hank-popup-inner {
            position: relative;
            padding: 15px;
            border-radius: 13px 13px 0 0;
            background: rgba(255,255,255,.95);
        }
        .hank-popup-inner:after {
            position: absolute;
            z-index: 15;
            top: auto;
            right: auto;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            background-color: rgba(0,0,0,.2);
        }
        .hank-popup-title {
            font-size: 18px;
            font-weight: 500;
            text-align: center;
        }
        .hank-popup-title+.hank-popup-text {
            font-family: inherit;
            font-size: 14px;
            margin: 5px 0 0;
        }
        .hank-popup-buttons {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            height: 44px;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
        }
        .hank-popup-button {
            font-size: 17px;
            line-height: 44px;
            position: relative;
            display: block;
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            height: 44px;
            padding: 0 5px;
            cursor: pointer;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #ff8fc0;
            background: rgba(255,255,255,.95);
            -webkit-box-flex: 1;
        }
        .hank-popup-button:first-child {
            border-radius: 0 0 0 13px;
        }
        .hank-popup-button:last-child {
            border-radius: 0 0 13px;
        }
        .hank-popup-button.hank-popup-button-bold {
            font-weight: 600;
        }
        .hank-popup-backdrop {
            position: fixed;
            z-index: 998;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;
            opacity: 0;
            background: rgba(0,0,0,.4);
        }
        .hank-popup-backdrop.hank-active {
            opacity: 1;
        }
        .hank-popup-button:after {
            position: absolute;
            z-index: 15;
            top: 0;
            right: 0;
            bottom: auto;
            left: auto;
            display: block;
            width: 1px;
            height: 100%;
            content: '';
            -webkit-transform: scaleX(.5);
            transform: scaleX(.5);
            -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
            background-color: rgba(0,0,0,.2);
        }
        #people_num{
            padding-top:15px;
            color:#ff7e00;
        }
        .mui-content{
            padding-bottom:70px;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
    <!--<button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">-->
        <!--<span class="mui-icon mui-icon-left-nav"></span>-->
    <!--</button>-->
    <h1 class="mui-title" id="title">血管"年龄"测试</h1>
    <!--<a id="share" class="mui-icon iconfont icon-share mui-pull-right" onclick="share()"></a>-->
</header>
<div class="mui-content">
    <div id="beforenext">
        <a id="before" class="mui-pull-left" style="margin-left: 31px;"></a>
        <div style="margin: 0 auto;">
            <span id="page">1</span><span id="pageNum">/12</span>
        </div>
    </div>
    <!--进度条-->
    <div id="progressbar">
        <span id="bar"></span>
    </div>
    <div class="bg">
        <div id="question-area">
            <div id="question">
                <p>1.最近情绪压抑</p>
            </div>
            <div id="choose">
                <div class="mui-row">
                    <div data-score="1" class="score mui-col-sm-12 mui-col-xs-12">
                        <div class="choosebg"><p class="choice center" id="a">是</p></div>
                    </div>
                    <div data-score="0" class="score mui-col-sm-12 mui-col-xs-12">
                        <div class="choosebg"><p class="choice" id="b">否</p></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="more_text">

    </div>
    <div class="bottom">
        <img  class="score mui-col-sm-2 mui-col-xs-2" src="http://api.chinaola.net/ola/Application/Test/Public/images/logo_@2.png"/>
        <p class="score mui-col-sm-6 mui-col-xs-6">e护上门APP</p>
        <button class="score mui-col-sm-3 mui-col-xs-3" type="button"><a href="http://a.app.qq.com/o/simple.jsp?pkgname=o.dcloud.Stroke_hospital">立即下载</a></button>
    </div>

    <!-- 弹窗 -->
    <div id="hank-popup" class="hank-popup-in">
        <div class="hank-popup-inner">
            <div class="hank-popup-title">测试结果</div>
            <div class="hank-popup-text">您得分<span id="defen"></span>分，您目前<span class="peopletype"></span><p style="font-size:12px;">（结果仅供参考，实际情况以临床判断为准）</p><p id="people_num">您是第<span class="people_hot"></span>位测试者</p></div>
        </div>
        <div class="hank-popup-buttons">
            <span onclick="yes_or_no(0);" class="hank-popup-button">确定</span>
            <span onclick="yes_or_no(1);" class="hank-popup-button hank-popup-button-bold">分享</span>
        </div>
    </div>
</div>
<script src="http://api.chinaola.net/ola/Application/Test/Public/js/mui.min.js"></script>
<script src="http://api.chinaola.net/ola/Application/Test/Public/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://api.chinaola.net/ola/Application/Test/Public/js/storage.js" type="text/javascript" charset="utf-8"></script>
<script src="http://api.chinaola.net/ola/Application/Test/Public/js/server.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    mui.init();
    var currentpage = 1,
            beforepage = 1;
    var yes = 0;sIze=1;
    var test;
    var share_title = "e护上门-血管'年龄'测试";
    var scorearray = new Array();
    var arr_title = [];
    arr_title[0] = "1.最近情绪压抑。";
    arr_title[1] = "2.过于较真。";
    arr_title[2] = "3.爱吃方便食品及饼干、点心。";
    arr_title[3] = "4.偏食肉类。";
    arr_title[4] = "5.缺少体育锻炼。";
    arr_title[5] = "6.每天吸烟支数乘以烟龄超过400。";
    arr_title[6] = "7.爬楼梯时胸痛。";
    arr_title[7] = "8.手足发凉、麻痹。";
    arr_title[8] = "9.经常丢三落四。";
    arr_title[9] = "10.血压高。";
    arr_title[10] = "11.胆固醇或血糖值高。";
    arr_title[11] = "12.亲属中有人死于脑卒中、心脏病。";

    $(".choosebg").on("touchstart",function(){
        $(".choosebg_active").removeClass("choosebg_active");
        $(this).addClass("choosebg_active");
    }).on("touchend",function(){
        $(this).removeClass("choosebg_active");
    });

    //测试数加一
    $.ajax({
        type: "post",
        url: test_ajax,
        async: true,
        dataType: 'json',
        data: {},
        success: function(data) {
            //console.log(JSON.stringify(data));
        },
        error: function(xhr, type, errorThrown) {
            mui.alert("网络连接失败");
        }
    });

    $(".score").on("click", function() {

        if(sIze == 12){
            account(yes);
        }

        $("#question>p").text(arr_title[sIze]);

        sIze++;
        if(sIze <= 12){
            $("#page").text(sIze);
        }
        if( $(this).find('p').text() == "是") {
            yes += 1;
        }

        $("#bar").width(sIze*7.69+"%");

    });



    function account(yes) {
        var total=yes;
        if(total >= 0 && total <= 4) {
            hotajax();
            $("#hank-popup").show().after('<div class="hank-popup-backdrop hank-active"></div>');
            $("#defen").text(total);
            $(".peopletype").text('血管年龄尚属正常。');
        } else if(total >= 5 && total <= 7) {
            hotajax();
            $("#hank-popup").show().after('<div class="hank-popup-backdrop hank-active"></div>');
            $("#defen").text(total);
            $(".peopletype").text('血管年龄比生理年龄大10岁。');
        } else if(total >= 8 && total <= 12) {
            hotajax();
            $("#hank-popup").show().after('<div class="hank-popup-backdrop hank-active"></div>');
            $("#defen").text(total);
            $(".peopletype").text('血管年龄比生理年龄大20岁。');
        }
    }

    function hotajax(){
        mui.ajax(hot, {
            type: 'post',
            timeout: 3000,
            data: {},
            dataType: 'json',
            success: function(data) {
                //document.write(JSON.stringify(data));
                if(data.code == "1") {
                    $(".people_hot").text(data.testtimes);
                }
            },
            error: function(xhr, type, errorThrown) {
                gotoerror();
                //			alert(JSON.stringify(xhr));
            }
        });
    }

    function yes_or_no(e){
        if (e == 0) {
            $("#hank-popup").hide();
            $(".hank-popup-backdrop").remove();
            mui.back();
        } else {
            $("#hank-popup").hide();
            $(".hank-popup-backdrop").remove();
            share_text();
        }
    }
    function share(){
        share_text();
    }

</script>
<script src="http://api.chinaola.net/ola/Application/Test/Public/js/share2.js" type="text/javascript" charset="utf-8"></script>

</body>

</html>